<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>Hexo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="GET 和 POST 传参一、GET 和 POST 传参方式的优缺点1.post更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中）2.post发送的数据量更大（get有url长度限制）3.post能发送更多的数据类型（get只能发送ASCII字符）4.post比get慢5.Post是向服务器提交数据的一种请求，get是向服务器发索取数据的一种请求。6.get会将数">
<meta property="og:type" content="article">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://example.com/2021/07/18/get&post%E4%BC%A0%E5%8F%82%E6%96%B9%E5%BC%8F/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:description" content="GET 和 POST 传参一、GET 和 POST 传参方式的优缺点1.post更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中）2.post发送的数据量更大（get有url长度限制）3.post能发送更多的数据类型（get只能发送ASCII字符）4.post比get慢5.Post是向服务器提交数据的一种请求，get是向服务器发索取数据的一种请求。6.get会将数">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2021-07-18T02:48:04.208Z">
<meta property="article:modified_time" content="2021-06-03T11:45:05.180Z">
<meta property="article:author" content="John Doe">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  
<link rel="stylesheet" href="/css/style.css">

<meta name="generator" content="Hexo 5.4.0"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">Hexo</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://example.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main"><article id="post-get&amp;post传参方式" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2021/07/18/get&post%E4%BC%A0%E5%8F%82%E6%96%B9%E5%BC%8F/" class="article-date">
  <time datetime="2021-07-18T02:48:04.208Z" itemprop="datePublished">2021-07-18</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="GET-和-POST-传参"><a href="#GET-和-POST-传参" class="headerlink" title="GET 和 POST 传参"></a>GET 和 POST 传参</h1><h2 id="一、GET-和-POST-传参方式的优缺点"><a href="#一、GET-和-POST-传参方式的优缺点" class="headerlink" title="一、GET 和 POST 传参方式的优缺点"></a>一、GET 和 POST 传参方式的优缺点</h2><p>1.post更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中）<br>2.post发送的数据量更大（get有url长度限制）<br>3.post能发送更多的数据类型（get只能发送ASCII字符）<br>4.post比get慢<br>5.Post是向服务器提交数据的一种请求，get是向服务器发索取数据的一种请求。<br>6.get会将数据缓存起来，而post不会<br>7.post请求包含更多的请求头<br>8.post在真正接受数据之前会先将请求头发送给服务器进行确认，然后才真正发送数据</p>
<h2 id="二、GET-和-POST-传参方式的请求过程"><a href="#二、GET-和-POST-传参方式的请求过程" class="headerlink" title="二、GET 和 POST 传参方式的请求过程"></a>二、GET 和 POST 传参方式的请求过程</h2><p>post请求的过程：<br>1.浏览器请求tcp连接（第一次握手）<br>2.服务器答应进行tcp连接（第二次握手）<br>3.浏览器确认，并发送post请求头（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）<br>4.服务器返回100 continue响应<br>5.浏览器开始发送数据<br>6.服务器返回200 ok响应<br>get请求的过程<br>1.浏览器请求tcp连接（第一次握手）<br>2.服务器答应进行tcp连接（第二次握手）<br>3.浏览器确认，并发送get请求头和数据（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）<br>4.服务器返回200 ok响应。</p>
<h2 id="三、相对来说-GET-对比-POST-的优势是什么？"><a href="#三、相对来说-GET-对比-POST-的优势是什么？" class="headerlink" title="三、相对来说 GET 对比 POST 的优势是什么？"></a>三、相对来说 GET 对比 POST 的优势是什么？</h2><p>GET 的URL可以手动输入啊，你在地址栏打个POST看看。本质上面， GET 的所有信息都在URL， 所以很方便的记录下来重复使用。如果你期望你复制的url资源可以更好的分享给别人看，那就用GET方法吧～POST方法做不到哦～<br>然而从深层次上分析：虽然这两者都是明文传送。但它们表达的语义不一样，这决定了主干网络可以对其做不同的处理。<br>get表达的是一种幂等的，只读的，纯粹的操作，即它除了返回结果不应该会产生其它副作用（如写数据库），因此绝大部分get请求（通常超过90%）都直接被CDN缓存了，这能大大减少web服务器的负担。<br>而post所表达的语义是非幂等的，有副作用的操作，所以必须交由web服务器处理。<br>因此若是把所有get请求换成post，意味着主干网络上的所有CDN都废掉了，web服务器要处理的请求数量将成百上千倍地增加，显然这不是一个聪明的做法！</p>
<h2 id="四、VUE之使用-AXIOS-进行GET-和-POST-进行传参"><a href="#四、VUE之使用-AXIOS-进行GET-和-POST-进行传参" class="headerlink" title="四、VUE之使用 AXIOS 进行GET 和 POST 进行传参"></a>四、VUE之使用 AXIOS 进行GET 和 POST 进行传参</h2><p>1.axios的定义<br>基于Promise的HTTP客户端，用于浏览器和node.js。<br>2.axios的特征<br>1.做的XMLHttpRequest从浏览器<br>2.让HTTP从node.js的请求<br>3.支持Promise API<br>4.拦截请求和响应<br>5.转换请求和响应数据<br>6.取消请求<br>7.自动转换JSON数据<br>8.客户端支持防范XSRF<br>3.axios的安装<br>三种方式，均可进行</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$  npm install axios   // 使用npm</span><br><span class="line">$  bower install axios   // 使用bower</span><br></pre></td></tr></table></figure>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>   // 通过cdn直接调用

<p>4.axios的使用<br>添加引用</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">import axios from &#x27;axios&#x27;;</span><br></pre></td></tr></table></figure>

<p>5.aixos之 get传参方式模板<br>此次get传参中的url需要进行字符串拼接</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">var id = 001;</span><br><span class="line">var url =  &#x27;http://192.168.**.***:8080/Card&#x27;;</span><br><span class="line">url += 	`?cardId=$&#123;id&#125;`;   // 拼接字符串</span><br><span class="line">axios.get(url).then(function(response) &#123;</span><br><span class="line">  if (response.data == false) &#123;</span><br><span class="line">  	this.$Message.success(&quot;注册成功&quot;);</span><br><span class="line">  &#125; else &#123;</span><br><span class="line">  	this.$Message.info(&quot;注册失败&quot;);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<p>6.aixos之 post传参方式实例</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">var url =  &#x27;&#x27;http://192.168.**.***:8080/Card&#x27;; </span><br><span class="line">axios.post(&#x27;url&#x27;, &#123;</span><br><span class="line">  数据库字段1: &#x27;value&#x27;,</span><br><span class="line">  数据库字段2: &#x27;value&#x27;</span><br><span class="line">&#125;</span><br><span class="line">)</span><br><span class="line">.then(function (response) &#123;</span><br><span class="line"> //具体操作</span><br><span class="line">  console.log(response);</span><br><span class="line">&#125;)</span><br><span class="line">.catch(function (error) &#123;</span><br><span class="line">  console.log(error);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>


      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2021/07/18/get&post%E4%BC%A0%E5%8F%82%E6%96%B9%E5%BC%8F/" data-id="ckr8lt4rt000520qw0lbfgtul" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
    
<nav id="article-nav">
  
    <a href="/2021/07/18/Git%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          (no title)
        
      </div>
    </a>
  
  
    <a href="/2021/07/18/flex%E5%B8%83%E5%B1%80/" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title"></div>
    </a>
  
</nav>

  
</article>

</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2021/07/">July 2021</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2021/07/18/%E6%99%BA%E8%83%BD%E5%8C%96%E8%B7%A8%E7%AB%AF/">(no title)</a>
          </li>
        
          <li>
            <a href="/2021/07/18/%E5%9F%9F%E8%A7%A3%E6%9E%90/">(no title)</a>
          </li>
        
          <li>
            <a href="/2021/07/18/%E6%97%A0%E9%99%90%E7%BA%A7%E7%9B%AE%E5%BD%95%E6%A0%91/">(no title)</a>
          </li>
        
          <li>
            <a href="/2021/07/18/%E6%96%87%E5%AD%97%E5%B1%85%E4%B8%AD/">(no title)</a>
          </li>
        
          <li>
            <a href="/2021/07/18/%E5%BE%AE%E6%A0%BC%E5%BC%8F/">(no title)</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2021 John Doe<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">

  
<script src="/fancybox/jquery.fancybox.pack.js"></script>




<script src="/js/script.js"></script>




  </div>
</body>
</html>